<template>
  <div class="box">
    <div class="left-box">
      <el-input placeholder="" v-model="input3">
        <i slot="suffix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-collapse v-model="activeNames">
        <el-collapse-item
          :name="index"
          v-for="(item, index) in materialList"
          :key="index"
        >
          <template slot="title">
            <div style="paddingLeft:15px">
              <i class="el-icon-user"></i>{{item.name}}
            </div>
          </template>
          <div v-for="(ele, key) in item.list" :key="key" class="materialName">
            {{ ele.name }}
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="right-box">
      <div class="up-box">
        <div class="up-btn">上传</div>
      </div>
      <el-table :data="tableData" border class="project-table">
        <el-table-column type="index" width="50" align="center">
        </el-table-column>
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="name" label="素材编码" width="180">
        </el-table-column>
        <el-table-column prop="address" label="素材名称" width="180">
        </el-table-column>
        <el-table-column prop="zuozhe" label="附件"> </el-table-column>
        <el-table-column prop="xiangmu" label="创始人"> </el-table-column>
        <el-table-column prop="date" label="创建时间"> </el-table-column>
        <el-table-column prop="" label="操作">
          <template>
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout=" prev, pager, next,sizes,jumper"
          :total="1000"
          :background="true"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input3: "",
      activeNames: [0],
      materialList: [
        {
          name: "系统数据",
          list: [
            {
              name: "组织架构",
            },
            {
              name: "员工信息",
            },
            {
              name: "产线工位信息",
            },
          ],
        },
        {
          name: "业务数据",
          list: [
            {
              name: "不良品",
            },
            {
              name: "SOP",
            },
            {
              name: "学习课件",
            },
          ],
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "EOS原型",
          address: "文件夹",
          zuozhe: "鑫海智桥",
          xiangmu: "3项目",
        },
        {
          date: "2016-05-02",
          name: "新建文件夹",
          address: "文件夹",
          zuozhe: "公用户",
          xiangmu: "0项目",
        },
        {
          date: "2016-05-02",
          name: "重汽WMS",
          address: "文件夹",
          zuozhe: "鑫海智桥",
          xiangmu: "3项目",
        },
        {
          date: "2016-05-02",
          name: "森麒麟",
          address: "文件夹",
          zuozhe: "鑫海智桥",
          xiangmu: "3项目",
        },
      ],
      currentPage: 1,
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: calc(100% - 20px);
  padding: 20px 10px 0;
  display: flex;
  .left-box {
    width: 15%;
    height: 100%;
    background: var(--background);
    margin-right: 10px;
    :deep(.el-collapse-item__content) {
      padding-bottom: 0;
    }
    .materialName {
      background: #ddd;
      padding: 5px 0 5px 15px;
    }
  }
  .right-box {
    width: calc(85% - 10px);
    height: 100%;
    .up-box {
      margin: 10px 0;
      .up-btn {
        width: 80px;
        line-height: 24px;
        text-align: center;
        background: var(--tabNav-background);
        font-size: 12px;
        color: #fff;
        cursor: pointer;
      }
    }
    .page-box {
      margin-top: 15px;
      text-align: right;
    }
  }
}
</style>
